<template>
  <div class="quiz-report-wrapper">
    <!-- quiz-report-wrappe -->
    <header-row
      :baby="curBabyData"
      :style="headerStyle"
      :isShowBtn="true"
      @clkBtn="onClkBtn"
    />
    <report-card />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as CONSTANTS from '@/constants/index'
import HeaderRow from '@/components/HeaderRow'
import ReportCard from './modules/ReportCard'
import ALLIMAGES from '@/utils/images/index'
import QUESTIONS from '@/assets/quiz/index'

export default {
  props: {},
  components: { HeaderRow, ReportCard },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['user', 'quiz']),
    curBabyData() {
      if (!this.user) return null
      return this.user.currentBabyData
    },
    historyList() {
      if (!this.quiz) return null
      return this.quiz.historyList
    },
    isLoading() {
      if (!this.historyList) return true
      return this.historyList.isLoading
    },
    IMAGES() {
      return ALLIMAGES.quiz
    },
    curBabyData() {
      if (!this.user) return null
      return this.user.currentBabyData
    },
    dateDuration() {
      if (!this.user) return 0
      return this.user.dateDuration
    },
    //获取对应的年龄段问题
    questions() {
      const dateDuration = this.dateDuration
      return QUESTIONS.find((item) => {
        const { min, max, questions } = item
        if (dateDuration < min) return false
        if (dateDuration > max) return false
        return true
      })
    },
    headerStyle() {
      return {
        margin: '0 auto',
        width: '92%',
        'margin-top': '22px',
        'border-bottom': '6px solid transparent',
      }
    },
  },
  async mounted() {
    let data = window.sessionStorage.getItem(CONSTANTS.STORAGE_VUEX_STATE)
    data = JSON.parse(data)
    this.$store.replaceState(Object.assign({}, data))
    window.onbeforeunload = () => {
      this.store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
    }
    if (this.user.currentBabyId) await this.onGetHistoryList()
    this.onBindTouchEvents()
  },
  beforeDestroy() {
    this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
  },
  filters: {},
  watch: {},
  methods: {
    onBindTouchEvents() {
      document
        .querySelector('.quiz-report-wrapper')
        .addEventListener('touchstart', this.onTouch)
      document
        .querySelector('.quiz-report-wrapper')
        .addEventListener('touchmove', this.onTouch)
    },
    async onGetHistoryList() {
      const babyId = this.user.currentBabyId
      await this.$store.dispatch(CONSTANTS.DISPATCH_GETASYNC_HISTORYLIST, {
        babyId,
      })
    },
    async onClkBtn() {
      //限制一天测评次数
      let count = await this.$store.dispatch(
        CONSTANTS.DISPATCH_GET_BABYASSESSCOUNT
      )
      if (count >= CONSTANTS.VAR_LIMITCOUNTOFDAY * 1)
        return this.$toast(CONSTANTS.LABEL_BABYOVERASSESSING)

      // 防止宝宝年龄过大
      if (!this.questions) return this.$toast(CONSTANTS.LABEL_BABYAGE_OVERAGE)

      this.$store.commit(CONSTANTS.COMMIT_RESET_QUIZSTATE)
      this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
      this.$store.dispatch(CONSTANTS.DISPATCH_REDIRECT, {
        path: '/quiz/role',
        isRouter: true,
      })
    },
    onTouch(e) {
      if (this.isLoading) return console.log("it's loading more data.")
      const babyId = this.user.currentBabyId
      const { pageNo } = this.historyList
      const params = { babyId, pageNo }
      this.$store.dispatch(CONSTANTS.DISPATCH_GETASYNC_HISTORYLIST, params)
      this.$store.commit(CONSTANTS.COMMIT_STORAGE_VUEXSTATE)
    },
  },
}
</script>

<style lang="less" scoped>
.quiz-report-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  & > div:nth-of-type(2) {
    flex-grow: 1;
  }
}
</style>
